<!DOCTYPE HTML>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../static/images/splash/splash-icon.png">
    <link rel="apple-touch-icon-precomposed" sizes="180x180" href="../static/images/splash/splash-icon-big.png">
    <link rel="apple-touch-startup-image" href="../static/images/splash/splash-screen.png"
          media="screen and (max-device-width: 320px)"/>
    <link rel="apple-touch-startup-image" href="../static/images/splash/splash-screen@2x.png"
          media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"/>
    <link rel="apple-touch-startup-image" href="../static/images/splash/splash-screen-six.png" media="(device-width: 375px)">
    <link rel="apple-touch-startup-image" href="../static/images/splash/splash-screen-six-plus.png" media="(device-width: 414px)">
    <link rel="apple-touch-startup-image" sizes="640x1096" href="../static/images/splash/splash-screen@3x.png"/>
    <link rel="apple-touch-startup-image" sizes="1024x748" href="static/images/splash/splash-screen-ipad-landscape"
          media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)"/>
    <link rel="apple-touch-startup-image" sizes="768x1004" href="../static/images/splash/splash-screen-ipad-portrait.png"
          media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)"/>
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="../static/images/splash/splash-screen-ipad-portrait-retina.png"
          media="(device-width: 768px)	and (orientation: portrait)	and (-webkit-device-pixel-ratio: 2)"/>
    <link rel="apple-touch-startup-image" sizes="1496x2048" href="../static/images/splash/splash-screen-ipad-landscape-retina.png"
          media="(device-width: 768px)	and (orientation: landscape)	and (-webkit-device-pixel-ratio: 2)"/>

    <title>Epsilon Mobile Framework - Version 2.0</title>

    <link href="/static/css/style.css" rel="stylesheet" type="text/css">
    <link href="/static/css/framework.css" rel="stylesheet" type="text/css">
    <link href="/static/css/owl.theme.css" rel="stylesheet" type="text/css">
    <link href="/static/css/swipebox.css" rel="stylesheet" type="text/css">
    <link href="/static/css/font-awesome.css" rel="stylesheet" type="text/css">
    <link href="/static/css/animate.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/static/js/framework.plugins.js"></script>


    <script type="text/javascript">
        function iniFun($) {
            if (getExplorer() == "Safari") {
                if (win_width >= 980) {
                    $(".header").css("left", win_width / 2 - 490);
                    $(".share-bottom").css("left", win_width / 2 - 490);
                }
            }
        }
    </script>
    <script type="text/javascript" src="/static/js/custom.js"></script>

</head>
<body>
<div id="mainDiv">
    <div id="preloader">
        <div id="status">
            <p class="center-text">
                Loading the content...
                <em>Loading depends on your connection speed!</em>
            </p>
        </div>
    </div>


    <ul class="menu-top">
        <li><a href="/hush-Inn"><i class="fa fa-home"></i>主页<i class="fa fa-circle"></i></a></li>
        <li>
            <a class="has-submenu" href="#"><i class="fa fa-cog"></i>记-技术<i class="fa fa-plus active-plus"></i></a>
            <ul class="submenu show-submenu">
                <li>
                    <a href="skill_fe.html"><i class="fa fa-angle-right"></i>前端<i class="fa fa-circle"></i></a>
                </li>
                <li><a href="skill_be.html"><i class="fa fa-angle-right"></i>后台<i class="fa fa-circle"></i></a>
                </li>
                <li class="active-menu">
                    <a href="skill_others.html"><i class="fa fa-angle-right"></i>其他<i class="fa fa-circle"></i></a>
                </li>
            </ul>
        </li>
        <li>
            <a class="has-submenu" href="#"><i class="fa fa-camera"></i>心-心旅<i class="fa fa-plus"></i></a>
            <ul class="submenu">
                <li><a href="travel_ty.html"><i class="fa fa-angle-right"></i>甜园<i class="fa fa-circle"></i></a>
                </li>
                <li><a href="travel_freeostage.html"><i class="fa fa-angle-right"></i>包邮区<i
                        class="fa fa-circle"></i></a>
                </li>
                <li><a href="travel_morefar.html"><i class="fa fa-angle-right"></i>远一点吧<i class="fa fa-circle"></i></a>
                </li>
                <li><a href="travel_yearn.html"><i class="fa fa-angle-right"></i>向往地<i
                        class="fa fa-circle"></i></a>
                </li>
            </ul>
        </li>
        <li>
            <a class="has-submenu" href="#"><i class="fa fa-coffee"></i>憩-憩息<i class="fa fa-plus"></i></a>
            <ul class="submenu">
                <li><a href="rest_eating.html"><i class="fa fa-angle-right"></i>吃货<i class="fa fa-circle"></i></a></li>
                <li><a href="rest_live.html"><i class="fa fa-angle-right"></i>会生活<i class="fa fa-circle"></i></a></li>
                <li><a href="rest_videos.html"><i class="fa fa-angle-right"></i>动影<i class="fa fa-circle"></i></a>
                </li>
            </ul>
        </li>
        <li>
            <a class="has-submenu" href="#"><i class="fa fa-cloud"></i>在线工具<i class="fa fa-plus"></i></a>
            <ul class="submenu">
                <li><a href="#"><i class="fa fa-angle-right"></i>2048<i class="fa fa-circle"></i></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-angle-right"></i>建设中<i class="fa fa-circle"></i></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-angle-right"></i>建设中<i class="fa fa-circle"></i></a>
                </li>
            </ul>
        </li>
        <li><a href="#"><i class="fa fa-heart-o"></i>新品<i class="fa fa-circle"></i></a></li>
        <li><a class="close-menu" href="#"><i class="fa fa-times"></i>关闭<i class="fa fa-circle"></i></a></li>
    </ul>

    <div class="header">
        <a href="index.html" class="header-logo"></a>
        <a href="#" class="header-navigation show-navigation"><i class="fa fa-navicon"></i></a>
    </div>
    <div class="header-clear-big"></div>

    <div class="content">
        <div class="container no-bottom">
            <h3>Typography Features</h3>

            <p>
                Features that are vital to any template, easy to use and copy paste code. You can just copy and paste
                these
                features
                into boxes or into repsonsive boxes!
            </p>
        </div>

        <div class="decoration"></div>

        <div class="container no-bottom">
            <p>
                1/1<br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                Proin luctus congue sodales. Pellentesque vel mollis odio, ac facilisis arcu.
                Etiam rutrum sem non risus condimentum, quis iaculis ligula facilisis.
            </p>
        </div>

        <div class="decoration"></div>

        <div class="container no-bottom">
            <p>
                1/1<br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                Proin luctus congue sodales. Pellentesque vel mollis odio, ac facilisis arcu.
                Etiam rutrum sem non risus condimentum, quis iaculis ligula facilisis.
            </p>

            <div class="decoration"></div>

            <div class="one-half">
                <p>
                    1/2<br>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                    Proin luctus congue sodales. Pellentesque vel mollis odio.
                </p>
            </div>
            <div class="two-half last-column">
                <p>
                    2/2<br>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                    Proin luctus congue sodales. Pellentesque vel mollis odio.
                </p>
            </div>
            <div class="decoration"></div>
            <div class="one-third">
                <p>
                    1/3<br>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                    Proin luctus congue sodales.
                </p>
            </div>
            <div class="one-third">
                <p>
                    2/3<br>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                    Proin luctus congue sodales.
                </p>
            </div>
            <div class="one-third last-column">
                <p>
                    3/3<br>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                    Proin luctus congue sodales.
                </p>
            </div>
        </div>

        <div class="decoration"></div>

        <div class="container no-bottom">
            <h3>Sample of input fields</h3>

            <p>
                Simple classses that generate all kinds of input fields for your needs, nicely animated and built with
                only
                one line of code.
            </p>

            <div class="one-half-responsive">
                <h5>Regular Fields</h5>

                <p class="half-bottom">
                    Simple text fields with focus effects. Text removed
                    or added back depending if values inserted.
                </p>
                <input onfocus="if (this.value=='Good Field') this.value = ''"
                       onblur="if (this.value=='') this.value = 'Good Field'" type="text"
                       class="text-input-one good-value"
                       value="Good Field"/>
                <input onfocus="if (this.value=='password') this.value = ''"
                       onblur="if (this.value=='') this.value = 'password' " type="password"
                       class="text-input-one good-value" value="password"/>
                <input onfocus="if (this.value=='Error Field') this.value = ''"
                       onblur="if (this.value=='') this.value = 'Error Field'" type="text"
                       class="text-input-one error-value" value="Error Field"/>
                <input onfocus="if (this.value=='password') this.value = ''"
                       onblur="if (this.value=='') this.value = 'password'" type="password"
                       class="text-input-one error-value no-bottom" value="password"/>
            </div>
            <div class="one-half-responsive last">
                <h5>Icon Fields</h5>

                <p class="half-bottom">
                    Simple text fields with focus effects. Text removed
                    or added back depending if values inserted.
                </p>
                <input onfocus="if (this.value=='Good Field') this.value = ''"
                       onblur="if (this.value=='') this.value = 'Good Field'" type="text"
                       class="text-input-one icon-user-value good-value" value="Good Field"/>
                <input onfocus="if (this.value=='password') this.value = ''"
                       onblur="if (this.value=='') this.value = 'password'" type="password"
                       class="text-input-one icon-password-value good-value" value="password"/>
                <input onfocus="if (this.value=='Error Field') this.value = ''"
                       onblur="if (this.value=='') this.value = 'Error Field'" type="text"
                       class="text-input-one icon-user-value error-value" value="Error Field"/>
                <input onfocus="if (this.value=='password') this.value = ''"
                       onblur="if (this.value=='') this.value = 'password'" type="password"
                       class="text-input-one icon-password-value error-value no-bottom" value="password"/>
            </div>
        </div>

        <div class="decoration"></div>

        <div class="container no-bottom">
            <h3>Sample of text highlights</h3>

            <p>Text highlights are an awesome way to emphesize something important you want to show off!</p>

            <div class="one-half-responsive">
                <p><span class="text-highlight highlight-turqoise">This is a highlight</span>and this is the text</p>

                <p><span class="text-highlight highlight-green">This is a highlight</span>and this is the text</p>

                <p><span class="text-highlight highlight-blue">This is a highlight</span>and this is the text</p>

                <p><span class="text-highlight highlight-magenta">This is a highlight</span>and this is the text</p>
            </div>
            <div class="one-half-responsive last-column">
                <p><span class="text-highlight highlight-dark">This is a highlight</span>and this is the text</p>

                <p><span class="text-highlight highlight-yellow">This is a highlight</span>and this is the text</p>

                <p><span class="text-highlight highlight-red">This is a highlight</span>and this is the text</p>

                <p><span class="text-highlight highlight-orange">This is a highlight</span>and this is the text</p>
            </div>
        </div>

        <div class="decoration"></div>

        <div class="container no-bottom">
            <h3>Icon lists</h3>

            <p>Icon lists are absolutely awesome! They are very simple to use and they're retina!</p>

            <div class="one-half">
                <ul class="icon-list">
                    <li class="address-list">Address icon</li>
                    <li class="block-list">Block icon</li>
                    <li class="bookmark-list">Bookmark icon</li>
                    <li class="briefcase-list">Briefcase icon</li>
                    <li class="bubble-list">Bubble icon</li>
                    <li class="buy-list">Buy icon</li>
                    <li class="calendar-list">Calendar icon</li>
                    <li class="clipboard-list">Clipboard icon</li>
                    <li class="clock-list">Clock icon</li>
                    <li class="delete-list">Delete icon</li>
                    <li class="diagram-list">Diagram icon</li>
                    <li class="document-list">Document icon</li>
                    <li class="down-list">Down icon</li>
                    <li class="flag-list">Flag icon</li>
                    <li class="folder-list">Folder icon</li>
                    <li class="gear-list">Gear icon</li>
                    <li class="globe-list">Globe icon</li>
                    <li class="heart-list">Heart icon</li>
                    <li class="help-list">Help icon</li>
                    <li class="info-list">Info icon</li>
                    <li class="key-list">Key icon</li>
                </ul>
            </div>
            <div class="one-half last-column">
                <ul class="icon-list">
                    <li class="left-list">Left icon</li>
                    <li class="letter-list">Letter icon</li>
                    <li class="monitor-list">Monitor icon</li>
                    <li class="pencil-list">Pencil icon</li>
                    <li class="plus-list">Plus icon</li>
                    <li class="present-list">Present icon</li>
                    <li class="print-list">Print icon</li>
                    <li class="right-list">Right icon</li>
                    <li class="save-list">Save icon</li>
                    <li class="search-list">Search icon</li>
                    <li class="shield-list">Shield icon</li>
                    <li class="statistics-list">Statistics icon</li>
                    <li class="stop-list">Stop icon</li>
                    <li class="tick-list">Tick icon</li>
                    <li class="trash-list">Trash icon</li>
                    <li class="up-list">Up icon</li>
                    <li class="user-list">User icon</li>
                    <li class="wallet-list">Walet icon</li>
                    <li class="warning-list">Warning icon</li>
                    <li class="home-list">Home icon</li>
                    <li class="label-list">Label icon</li>
                </ul>
            </div>
        </div>

        <div class="container">
            <div class="one-third-responsive">
                <ul class="normal-list">
                    <li>List item 1</li>
                    <li>List item 2</li>
                    <li>List item 3</li>
                    <li>List item 4</li>
                    <li>List item 5</li>
                </ul>
            </div>
            <div class="one-third-responsive">
                <ol class="number-list">
                    <li>List item 1</li>
                    <li>List item 2</li>
                    <li>List item 3</li>
                    <li>List item 4</li>
                    <li>List item 5</li>
                </ol>
            </div>
            <div class="one-third-responsive last-column">
                <ul class="font-icon-list">
                    <li><i class="fa fa-facebook"></i>Facebook list</li>
                    <li><i class="fa fa-twitter"></i>Twitter list</li>
                    <li><i class="fa fa-spinner fa-spin"></i>Spinner list</li>
                    <li><i class="fa fa-phone"></i>Phone List</li>
                    <li><i class="fa fa-tablet"></i>Tablet List</li>
                </ul>
            </div>
        </div>

        <div class="decoration"></div>

        <div class="container no-bottom">
            <h3>Code structures</h3>

            <p>Maybe you're a developer and want to add code, maybe not, it's still an included option!</p>

            <div class="code">
                <span class="wline"> &lt;p class="test1"&gt;Simple code!&lt;/p&gt;</span>
                <span class="gline"> &lt;p class="test2"&gt;Simple code!&lt;/p&gt;</span>
            </div>
        </div>

        <div class="decoration"></div>

        <div class="container no-bottom">
            <h3>Simple notifications!</h3>

            <p>These notifications can be shown but they cannot be dismissed by tapping or closing!</p>

            <div class="one-half-responsive">
                <div class="static-notification-red">
                    <p class="center-text uppercase">Red notification!</p>
                </div>
                <div class="static-notification-green">
                    <p class="center-text uppercase">Green notification!</p>
                </div>
            </div>
            <div class="one-half-responsive last-column">
                <div class="static-notification-yellow">
                    <p class="center-text uppercase">Yellow notification!</p>
                </div>
                <div class="static-notification-blue">
                    <p class="center-text uppercase">Blue notification!</p>
                </div>
            </div>
            <div class="clear"></div>
        </div>

        <div class="decoration"></div>

        <div class="container no-bottom">
            <h3 class="left-text">Left text.</h3>

            <p class="left-text">
                This is a simple paragrahp aligned to the left side of the screen!
                This is a simple paragrahp aligned to the left side of the screen!
            </p>

            <div class="decoration"></div>

            <h3 class="center-text">Center text.</h3>

            <p class="center-text">
                This is a simple paragraph aligned to the center part of the screen!
                This is a simple paragraph aligned to the center part of the screen!
            </p>

            <div class="decoration"></div>

            <h3 class="right-text">Right text.</h3>

            <p class="right-text">
                This is a simple paragraph aligned to the right side of the screen!
                This is a simple paragraph aligned to the right side of the screen!
            </p>
        </div>

        <div class="decoration"></div>

        <div class="container no-bottom">
            <h3>How about a table?</h3>

            <p>And it's pure CSS3! That means just fill in the data, and the table expands to fit the size you need!</p>
            <table cellspacing='0' class="table">
                <tr>
                    <th>TABLE</th>
                    <th class="table-title">PLUS</th>
                    <th class="table-title">PRO</th>
                </tr>
                <tr>
                    <td class="table-sub-title"> ONE</td>
                    <td>Yes</td>
                    <td>Yes</td>
                </tr>
                <tr class='even'>
                    <td class="table-sub-title"> TWO</td>
                    <td>No</td>
                    <td>Yes</td>
                </tr>
                <tr>
                    <td class="table-sub-title"> THREE</td>
                    <td>No</td>
                    <td>No</td>
                </tr>
                <tr class='even'>
                    <td class="table-sub-title">VALUE</td>
                    <td class="price">$9.<sup class="small-price">99</sup></td>
                    <td class="price">$109.<sup class="small-price">99</sup></td>
                </tr>
            </table>
        </div>
        <div class="decoration"></div>
    </div>


    <!-- Page Footer-->
    <div class="footer">
        <div class="footer-socials half-bottom">
            <a href="#" class="footer-facebook"><i class="fa fa-facebook"></i></a>
            <a href="#" class="footer-twitter"><i class="fa fa-twitter"></i></a>
            <a href="#" class="footer-google"><i class="fa fa-google-plus"></i></a>
            <a href="#" class="footer-share show-share-bottom"><i class="fa fa-share-alt"></i></a>
            <a href="#" class="footer-up"><i class="fa fa-angle-up"></i></a>
        </div>
        <p class="center-text">Copyright 2015. All rights reserved.</p>
    </div>

    <!-- Share Elements-->
    <div class="share-bottom">
        <h3>Share Page</h3>

        <div class="share-socials-bottom">
            <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.themeforest.net/">
                <i class="fa fa-facebook facebook-color"></i>
                Facebook
            </a>
            <a href="https://twitter.com/home?status=Check%20out%20ThemeForest%20http://www.themeforest.net">
                <i class="fa fa-twitter twitter-color"></i>
                Twitter
            </a>
            <a href="https://plus.google.com/share?url=http://www.themeforest.net">
                <i class="fa fa-google-plus google-color"></i>
                Google
            </a>

            <a href="https://pinterest.com/pin/create/button/?url=http://www.themeforest.net/&media=https://0.s3.envato.com/files/63790821/profile-image.jpg&description=Themes%20and%20Templates">
                <i class="fa fa-pinterest-p pinterest-color"></i>
                Pinterest
            </a>
            <a href="sms:">
                <i class="fa fa-comment-o sms-color"></i>
                Text
            </a>
            <a href="mailto:?&subject=Check this page out!&body=http://www.themeforest.net">
                <i class="fa fa-envelope-o mail-color"></i>
                Email
            </a>
        </div>
        <a href="#" class="close-share-bottom">Close</a>
    </div>
    <div class="menu-wrapper-background"></div>
</div>
</body>



















